iT邦幫忙

DAY 17
1

Sass3.3 & CSS設計模式系列 第 18

Sass教學 (17) - susy2 - Toolkit - Span Mixin、function

  • 分享至 

  • xImage
  •  

Yes
影片教學請點選下圖連結↓

以下文章同步於Github

範例程式碼
susy2 - span Mixin、function

Span [mixin]
格式:span($span) { @content }
在之前幾個章節其實就使用了很多span的用法,
這次則是一次將他大部分的設定方式做個總整理。

首先是比較常見的設定:

.box{@include(2)} //佔兩欄寬
.box{@include(25%)} //也可以直接在裡面寫寬度

再來如果你的gutter-position是設定before或after的時候,
就必須用到last與first來清除掉最後一欄的margin gutter,
像是這樣:

$susy:(columns:12,gutter-position:after);
.sidebar{@include span(4)};
.main{@include span(8 last)} //為了讓.sidebar與.main滿版,所以就必須清掉.main的margin-right

如果你的子元素也有需要用到span的話,
這樣的寫法是錯的:

$susy:(columns:12,gutter-position:after);
.main{
    @include span(5);
    .left{
        @include span(2);
    }
}

原因是susy預設是fulid排版,
也就是以%數來設定寬度,
.main與.left都是以預設$susy的12欄來編譯span,
但這樣就不對了,
因為.left的父元素只有5欄,
所以你必須依照他父元素的設定來寫span才對。
在這裡susy2則提供了兩種寫法:

$susy:(columns:12,gutter-position:after);
.main{
    @include span(5);
    .left{
        @include span(2 of 5);  //利用of告知總欄數
    }
}

或者:

$susy:(columns:12,gutter-position:after);
.main{
    @include span(5){
        .left{
            @include span(2);  //因為包在.main的父元素span裡面,所以就不用寫of了
        }
    };
}

Nesting
如果你的gutter-position是用split、inside、inside-static的話,就不用使用last或first來消除gutter,
但會有個問題是像gutter-position:inside如果使用span()的話,
會產生出padding-left、padding-right的gutter值,
但有的時候我們希望在裡面繼續寫排版元素,
就會希望把該元素的padding給清除,
如果你有這樣的需求,
就可以使用nest。

$susy:(columns:12,gutter-position:inside);
.main{
    @include span(5 nest); //加上關鍵字 nest清除padding的gutter
    .left{
        @include span(2);       
    }
}

Location
如果你的span使用到isolation排版方式的話,
那就可以透過at定位到第幾欄:

//總共佔三欄,定位在第二欄的位置
.index { @include span(isolate 3 at 2); }
narrow, wide, and wider

這三個值代表著你希望span編譯出來的寬度是多少,
narrow是1column的寬度,
wide是1column+1gutter的寬度,
wider是1column+2gutter的寬度,
寫法如下:

// grid span
.narrow { @include span(2); } 
.wide { @include span(2 wide); }
.wider { @include span(2 wider); }

//編譯出來的CSS
.narrow { width: 22.5%; }
.wide { width: 25%; }
.wider { width: 27.5%; }

但這個東西我比較常用span提供的function來使用,
例如:

.box{
    @include span(1);
    margin-left:span(1 wide);
}

這樣子編譯出來的CSS就會margin-left推1column+1gutter的寬度。

總結
各位可以看出span的用法非常的多元,
如果你是初次使用susy2,
建議至少要了解at、of、last的用法,
在設計上才比較得心應手,
等到摸熟以後再去玩些進階的$span設定。


上一篇
Sass教學 (16) - susy2 - Shorthand(簡寫)
下一篇
Sass教學 (18) - susy2 - Toolkit - gutter、container
系列文
Sass3.3 & CSS設計模式46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言